<!--
 * @Description: 缩放元素
-->
<template>
  <div class="tool-box box">
    <button class="tool-item" @click="big">
      <svg t="1650853919128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="1271" width="14" height="14">
        <path
          d="M970.837333 919.850667l-205.696-205.653334A382.421333 382.421333 0 0 0 853.333333 469.333333a384 384 0 0 0-384-384 384 384 0 0 0-384 384 384 384 0 0 0 384 384 382.421333 382.421333 0 0 0 244.906667-88.192l205.653333 205.653334a36.053333 36.053333 0 0 0 50.986667 0 36.266667 36.266667 0 0 0-0.042667-50.944z m-380.117333-162.986667c-38.4 16.256-79.189333 24.448-121.386667 24.448a311.296 311.296 0 0 1-220.586666-91.392A311.296 311.296 0 0 1 157.312 469.333333 311.296 311.296 0 0 1 248.746667 248.746667 311.296 311.296 0 0 1 469.333333 157.354667a311.296 311.296 0 0 1 220.586667 91.392A311.296 311.296 0 0 1 781.354667 469.333333a311.296 311.296 0 0 1-91.392 220.586667 310.186667 310.186667 0 0 1-99.242667 66.901333z"
          fill="#595959" p-id="1272"></path>
        <path
          d="M652.672 431.829333h-147.84V292.010667a35.968 35.968 0 1 0-71.978667 0v139.818666H292.010667a35.968 35.968 0 1 0 0 72.021334h140.8v140.8a35.968 35.968 0 1 0 72.021333 0v-140.8h147.84a35.968 35.968 0 1 0 0-72.021334z"
          fill="#595959" p-id="1273"></path>
      </svg>
    </button>
    <button class="tool-item" @click="small">
      <svg t="1650853934351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="1470" width="14" height="14">
        <path
          d="M970.837333 919.850667l-205.696-205.653334A382.421333 382.421333 0 0 0 853.333333 469.333333a384 384 0 0 0-384-384 384 384 0 0 0-384 384 384 384 0 0 0 384 384 382.421333 382.421333 0 0 0 244.906667-88.192l205.653333 205.653334a36.053333 36.053333 0 0 0 50.986667 0 36.266667 36.266667 0 0 0-0.042667-50.944z m-380.117333-162.986667c-38.4 16.256-79.189333 24.448-121.386667 24.448a311.296 311.296 0 0 1-220.586666-91.392A311.296 311.296 0 0 1 157.312 469.333333 311.296 311.296 0 0 1 248.746667 248.746667 311.296 311.296 0 0 1 469.333333 157.354667a311.296 311.296 0 0 1 220.586667 91.392A311.296 311.296 0 0 1 781.354667 469.333333a311.296 311.296 0 0 1-91.392 220.586667 310.186667 310.186667 0 0 1-99.242667 66.901333z"
          fill="#595959" p-id="1471"></path>
        <path
          d="M652.672 431.829333H292.010667a35.968 35.968 0 1 0 0 72.021334h360.661333a35.968 35.968 0 1 0 0-72.021334z"
          fill="#595959" p-id="1472"></path>
      </svg>
    </button>
    <button class="tool-item" @click="rSet">1:1</button>
    <button class="tool-item" @click="setViewport" icon="md-resize">
      <svg t="1683140543832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="46539" width="26" height="26">
        <path
          d="M884.363636 919.272727H139.636364c-18.618182 0-34.909091-16.290909-34.909091-34.909091V139.636364c0-18.618182 16.290909-34.909091 34.909091-34.909091h744.727272c18.618182 0 34.909091 16.290909 34.909091 34.909091v744.727272c0 18.618182-16.290909 34.909091-34.909091 34.909091z m-709.818181-69.818182h674.90909v-674.90909h-674.90909v674.90909z"
          fill="#BAC0CA" p-id="46540"></path>
        <path
          d="M756.363636 414.254545c-16.290909 0-30.254545-13.963636-30.254545-30.254545v-86.109091h-86.109091c-16.290909 0-30.254545-13.963636-30.254545-30.254545s13.963636-30.254545 30.254545-30.254546h116.363636c16.290909 0 30.254545 13.963636 30.254546 30.254546v116.363636c0 16.290909-13.963636 30.254545-30.254546 30.254545zM267.636364 414.254545c-16.290909 0-30.254545-13.963636-30.254546-30.254545v-116.363636c0-16.290909 13.963636-30.254545 30.254546-30.254546h116.363636c16.290909 0 30.254545 13.963636 30.254545 30.254546s-13.963636 30.254545-30.254545 30.254545h-86.109091v86.109091c0 16.290909-13.963636 30.254545-30.254545 30.254545zM384 786.618182h-116.363636c-16.290909 0-30.254545-13.963636-30.254546-30.254546v-116.363636c0-16.290909 13.963636-30.254545 30.254546-30.254545s30.254545 13.963636 30.254545 30.254545v86.109091h86.109091c16.290909 0 30.254545 13.963636 30.254545 30.254545s-13.963636 30.254545-30.254545 30.254546zM756.363636 786.618182h-116.363636c-16.290909 0-30.254545-13.963636-30.254545-30.254546s13.963636-30.254545 30.254545-30.254545h86.109091v-86.109091c0-16.290909 13.963636-30.254545 30.254545-30.254545s30.254545 13.963636 30.254546 30.254545v116.363636c0 16.290909-13.963636 30.254545-30.254546 30.254546z"
          fill="#BAC0CA" p-id="46541"></path>
      </svg>
    </button>
  </div>
</template>

<script>
import select from '../mixins/select';

export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      zoom: 0,
    };
  },
  computed: {
    unShow() {
      return this.mSelectMode === 'one' && this.mSelectOneType === 'group';
    },
    createShow() {
      return this.mSelectMode === 'multiple';
    },
  },
  methods: {
    rSet() {
      this.canvas.editor.editorWorkspace.one();
    },
    big() {
      this.canvas.editor.editorWorkspace.big();
    },
    small() {
      this.canvas.editor.editorWorkspace.small();
    },
    setViewport() {
      this.canvas.editor.editorWorkspace.auto();
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute !important;
  right: 10px;
  bottom: 10px;
}
</style>
